@import "../_function";
@import "../mixin";
@import "../_variables";

.detail-add-cart {
	background: $bgColorMain;
	.detail-add-cart-main {
		padding-left: pr(42);
		.detail-add-cart-header {
			padding: pr(42) pr(142) pr(42) 0;
			position: relative;
			display: flex;
			align-items: center;
			.detail-add-cart-header-image {
				width: pr(174);
				height: pr(174);
				img {
					height: 100%;
				}
			}
			.detail-add-cart-header-info {
				width: 100%;
				box-sizing: border-box;
				padding-left: pr(35);
				overflow: hidden;
				.detail-add-cart-header-name {
					@include text-ellipsis;
					font-size: pr(35);
					margin-bottom: pr(50);
				}
				.detail-add-cart-header-price {
					font-size: pr(35);
					color: $priceColor;
				}
			}
			.close-add-cart {
				position: absolute;
				right: pr(40);
				top: pr(27);
				width: pr(52);
				height: pr(52);
				border: 1px solid #989898;
				border-radius: 50%;
				cursor: pointer;
				&:after, &:before {
					content: '';
					display: block;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-top: pr(-17);
					width: 1px;
					height: pr(35);
					background: #989898;
					transform-origin: center;
				}
				&:after {
					transform: rotate(45deg);
				}
				&:before {
					transform: rotate(-45deg);
				}
			}
		}
		.detail-add-cart-properties {
			padding: pr(23) 0;
			font-size: pr(35);
			border: {
				top: 1px solid $borderColor;
				bottom: 1px solid $borderColor;
			}
			.detail-add-cart-properties-item {
				margin-bottom: pr(50);
				.detail-add-cart-properties-item-header {
					margin-top: pr(33);
				}
			}
		}
		.detail-add-cart-number {
			font-size: pr(35);
			height: pr(205);
			padding-right: pr(44);
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
	}
	.detail-add-cart-btn {
		button {
			width: 100%;
			height: pr(125);
			background: $formColor;
			color: $userNameColor;
			border: none;
			font-size: pr(45);
		}
	}
}
